<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<div id="app">
	<div>
		<p>姓:<input type="text" v-model="firstName"></p>
		<p>名:<input type="text" v-model="lastName"></p>
		<p>姓名1:<input type="text" v-model="fullName1"></p>
		<p>姓名2:<input type="text" v-model="fullName2"></p>
	</div>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
	var vm = new Vue({
		el: "#app",
		data: {
			firstName: "wei",
			lastName: "nengyu",
			fullName2: ''
		},
		computed: {
			fullName1 () { // 计算属性的一个方法, 方法的返回值作为属性的值
				return this.firstName + ' ' + this.lastName;
			}
		},
		watch: {
			firstName: function(newValue, oldValue) {
				this.fullName2 = newValue + ' ' + this.lastName;
			},
			lastName: function(newValue, oldValue) {
				this.fullName2 = this.lastName + ' ' + newValue;
			}
		}
	});
</script>
</body>
</html>